<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2016/2/24 0024
  Time: 11:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <c:choose>
    <c:when test="${user.userPhone==null||user.userPhone==0}">
    <title>手机号码设置</title>
        </c:when>
    <c:when test="${user.userPhone!=null}">
     <title>修改手机号码</title>
        </c:when>
        </c:choose>
    <style>
        .num_error{  right:0.5rem; top:0; color:#cb1448;}
    </style>
    <script type="text/javascript">
        $(function ($) {
            var countdown = 5;
            $("#getNumber").click(function () {
                        var obj = $(this);
                        var phoneNum = $("#userPhone").val();
                        if (phoneNum == null || phoneNum == "") {
                            $("#user-name-label > .num_error").remove();
                            $("#userPwd-label > .num_error").remove();
                            $("#user-number-label > .num_error").remove();
                            $("#user-name-label").append('<span class="num_error">请输入手机号码</span>');
                        } else {
                            $.post(
                                    "${ctx}/checkPhoneNum",
                                    {
                                        "phoneNum": phoneNum
                                    },
                                    function (backdata) {
                                        if (backdata == "yes") {
                                            $("#user-name-label > .num_error").remove();
                                            $("#userPwd-label > .num_error").remove();
                                            $("#user-number-label > .num_error").remove();
                                            $("#user-name-label").append('<span class="num_error">手机号码存在</span>');
                                        } else if (backdata == "no") {
                                            var hasClick = $(obj).attr("hasclick");
                                            if (hasClick == 1) {
                                                countdown = 60;
                                                $.ajax({
                                                    type: "GET",
                                                    url: "${ctx}/user/register_phone/" + phoneNum,
                                                    dataType: "JSON",
                                                    success: function (msg) {
                                                        if (msg == 0) {
                                                            $("#user-name-label > .num_error").remove();
                                                            $("#userPwd-label > .num_error").remove();
                                                            $("#user-number-label > .num_error").remove();
                                                            $("#msg").html("验证码发送成功");
                                                            settime(obj);
                                                        }
                                                    }
                                                });
                                            }
                                        }
                                    }
                            )
                        }

                    }
            );
            function settime(val) {
                if (countdown == 0) {
                    //                $(val).removeAttribute("disabled");
                    $(val).attr("hasclick", "1");
                    $(val).text("免费获取验证码");
                } else {
                    $(val).attr("hasclick", "0");
                    //                $(val).("disabled", true);
                    $(val).text("重新发送(" + countdown + ")");
                    countdown--;
                    setTimeout(function () {
                        settime(val)
                    }, 1000);
                }
            }

        });
    </script>
    <script type="text/javascript">
        $(function ($) {
            var countdown = 5;
            $("#getVerifyCode").click(function () {
                        var obj = $(this);
                        var phoneNum = $("#userPhone").val();
                        if (phoneNum == null || phoneNum == "") {
                            $("#user-name-label > .num_error").remove();
                            $("#userPwd-label > .num_error").remove();
                            $("#user-number-label > .num_error").remove();
                            $("#user-name-label").append('<span class="num_error">请输入手机号码</span>');
                        } else {
                            $.post(
                                    "${ctx}/checkPassword",
                                    {
                                        "phoneNum": phoneNum
                                    },
                                    function (backdata) {
                                        if (backdata == "yes") {
                                            var hasClick = $(obj).attr("hasclick");
                                            if (hasClick == 1) {
                                                countdown = 60;
                                                $.ajax({
                                                    type: "GET",
                                                    url: "${ctx}/user/sendingVerificationCodeAjax/" + phoneNum,
                                                    dataType: "JSON",
                                                    success: function (msg) {
                                                        if (msg == 0) {
                                                            $("#user-name-label > .num_error").remove();
                                                            $("#userPwd-label > .num_error").remove();
                                                            $("#user-number-label > .num_error").remove();
                                                            $("#msg").html("验证码发送成功");
                                                            settime(obj);
                                                        }
                                                    }
                                                });
                                            }
                                        } else {
                                            $("#user-name-label > .num_error").remove();
                                            $("#userPwd-label > .num_error").remove();
                                            $("#user-number-label > .num_error").remove();
                                            $("#user-name-label").append('<span class="num_error">手机号和你绑定的不符合</span>');
                                        }
                                    }
                            )
                        }

                    }
            );
            function settime(val) {
                if (countdown == 0) {
//                $(val).removeAttribute("disabled");
                    $(val).attr("hasclick", "1");
                    $(val).text("免费获取验证码");
                } else {
                    $(val).attr("hasclick", "0");
//                $(val).("disabled", true);
                    $(val).text("重新发送(" + countdown + ")");
                    countdown--;
                    setTimeout(function () {
                        settime(val)
                    }, 1000);
                }
            }
        });
    </script>
    <script>
            function phone() {
                var userPwd = document.getElementById("userPwd"); //获取密码框值
                var userPhone = document.getElementById("userPhone");  //获取手机框值
                var number = document.getElementById("number"); //获取验证码框值
                if (userPhone.value == null || userPhone.value == "") {
                    $("#user-name-label > .num_error").remove();
                    $("#userPwd-label > .num_error").remove();
                    $("#user-number-label > .num_error").remove();
                    $("#user-name-label").append('<span class="num_error">请输入手机号码</span>');
                    return false;
                } else {
                    var pattern = /^1[3|5|7|8|][0-9]{9}$/;
                    if (!pattern.test(userPhone.value)) {
                        $("#user-name-label > .num_error").remove();
                        $("#userPwd-label > .num_error").remove();
                        $("#user-number-label > .num_error").remove();
                        $("#user-name-label").append('<span class="num_error">手机号码格式不正确</span>');
                        return false;
                    }
                    if (number.value == null || number.value == "") {
                        $("#user-name-label > .num_error").remove();
                        $("#userPwd-label > .num_error").remove();
                        $("#user-number-label > .num_error").remove();
                        $("#user-number-label").append('<span class="num_error">请输入验证码</span>');
                        return false;
                    } else {
                        if (number.value.length < 4 ) {
                            $("#user-name-label > .num_error").remove();
                            $("#userPwd-label > .num_error").remove();
                            $("#user-number-label > .num_error").remove();
                            $("#user-number-label").append('<span class="num_error">请输入正确的验证码</span>');
                            return false;
                        }
                        if (userPwd.value == null || userPwd.value == "") {
                            $("#user-name-label > .num_error").remove();
                            $("#userPwd-label > .num_error").remove();
                            $("#user-number-label > .num_error").remove();
                            $("#userPwd-label").append('<span class="num_error">请输入密码</span>');
                            return false;
                        }
                        document.getElementById("phone").submit();
                }

                }

            }


    </script>
    <script>
        function checkUser() {
            var number = document.getElementById("number"); //获取验证码框值
            if (number.value == null || number.value == "") {
                $("#user-number-label > .num_error").remove();
                $("#user-number-label").append('<span class="num_error">请输入验证码</span>');
                return false;
            } else {
                if (number.value.length < 4) {
                    $("#user-number-label > .num_error").remove();
                    $("#user-number-label").append('<span class="num_error">请输入正确的验证码</span>');
                    return false;
                }
            }
            document.getElementById("checkUser").submit();
        }
    </script>
</head>
<body class=" b-ffffff">
<article class="viewports">
    <c:choose>
        <c:when test="${user.userPhone==null||user.userPhone==0}">
            <form:form modelAttribute="PhoneModel" id="phone" method="post" action="${ctx}/user/update_phone">
                <div class="p40 login_reg">
                    <div class="lh2 mt20" >
                        <div class="odr3 r5 plr20" >
                            <input id="userPhone" name="userPhone" class="i_text" type="text"  placeholder="手机号码">
                        </div>
                    </div>
                    <span  id="user-name-label"></span>
                    <c:if test="${errorType==1}">
                        <span  class="num_error">${error}</span>
                    </c:if>
                    <div class="layout-box lh2 mt20" >
                        <div class="odr3 r5 plr20" >
                            <input id="number" name="number" class="i_text" type="text" value="" placeholder="输入验证码">
                        </div>
                        <div class="box-col tar">
                            <a id="getNumber" class="c-33ccff" href="javascript:void(0)" hasclick="1">获取手机验证码</a>
                        </div>
                    </div>
                    <span  id="user-number-label"></span>
                    <c:if test="${errorType==2}">
                        <span style="margin-right:150px;" class="num_error">${error}</span>
                    </c:if>
                    <c:if test="${errorType==4}">
                        <span style="margin-right:150px;" class="num_error">${error}</span>
                    </c:if>
                    <div class="lh2 mt20">
                        <div class="odr3 r5 plr20" >
                            <input class="i_text" type="password" name="userPwd" id="userPwd" type="text" placeholder="登录密码">
                        </div>
                    </div>
                    <span id="userPwd-label"></span>
                    <div class="pt50">
                        <button type="button" onclick = "phone();"  class="i_btn b-ffaa3b cf r5 lh2">保存</button>
                    </div>
                    <div class="fs24 c3 ptb30">
                        <div>提示： <br>设置手机号和登录密码之后，可以使用手机号登录PC端。</div>
                    </div>
                </div>
            </form:form>
        </c:when>
        <c:when test="${user.userPhone!=null}">
            <form:form modelAttribute="PhoneModel" name="phoneForm" method="post"  id="checkUser" action="${ctx}/user/update_phone">
                <div class="p40 login_reg">
                    <div class="lh2 mt20">
                        <div class="odr3 r5 plr20">
                            <input class="i_text" type="text" value="" Disabled="true" placeholder="${phone}">
                            <input id="userPhone" type="hidden" name="userPhone" value="${userPhone}"/>
                        </div>
                    </div>
                    <div class="layout-box lh2 mt20" >
                        <div class="odr3 r5 plr20" >
                            <input class="i_text" id="number" name="number" type="text" value="" placeholder="输入验证码">
                        </div>
                        <div class="box-col tar">
                            <a id="getVerifyCode" class="c-33ccff" href="javascript:void(0)" hasclick="1">获取手机验证码</a>
                        </div>
                    </div>
                    <span  id="user-number-label"></span>
                    <c:if test="${errorType==2}">
                        <span style="margin-right:150px;" class="num_error">${error}</span>
                    </c:if>
                    <c:if test="${errorType==4}">
                        <span style="margin-right:150px;" class="num_error">${error}</span>
                    </c:if>
                    <input id="userPwd" class="s_text" type="hidden" placeholder="请输入6位数以上密码" name="userPwd"/>
                    <div class="pt50">
                        <button class="i_btn b-ffaa3b cf r5 lh2" type="button" onclick = "checkUser();" >下一步</button>
                    </div>
                    <div class="fs24 c3 ptb30">
                        <div>提示： <br>设置手机号和登录密码之后，可以使用手机号登录PC端。</div>
                    </div>
                </div>
            </form:form>
        </c:when>
    </c:choose>
</article>
</body>

<%--<body>--%>
<%--<span id="msg"></span>--%>
<%--<article>--%>
<%--<c:choose>--%>
<%--<c:when test="${user.userPhone==null||user.userPhone==0}">--%>
<%--<form:form modelAttribute="PhoneModel" name="phone" method="post" action="${ctx}/user/update_phone">--%>
<%--<form action="">--%>
<%--<div class="list_item2 p25">--%>
<%--<ul class="odr r5">--%>
<%--<li class="odr_b" id="user-name-label">--%>
<%--<input id="userPhone" class="s_text" type="text" placeholder="请输入手机号"--%>
<%--name="userPhone"/>--%>
<%--</li>--%>
<%--<li class="odr_b" id="user-number">--%>
<%--<input id="number" name="number" class="s_text" type="text" placeholder="请输入验证码"/><a--%>
<%--name="getNumber" class="hq_code r5" href="javascript:void(0)" hasclick="1">获取验证码</a>--%>
<%--<c:if test="${errorType==1}">--%>
<%--<span style="margin-right:150px;" class="t_msg">${error}</span>--%>
<%--</c:if>--%>
<%--<c:if test="${errorType==2}">--%>
<%--<span style="margin-right:150px;" class="t_msg">${error}</span>--%>
<%--</c:if>--%>
<%--<c:if test="${errorType==4}">--%>
<%--<span style="margin-right:150px;" class="t_msg">${error}</span>--%>
<%--</c:if>--%>
<%--</li>--%>
<%--</ul>--%>
<%--<li class="odr_b" id="userPwd-label">--%>

<%--<li class="odr_b"><input placeholder="请输入新密码" class="s_text" type="userPwd" name="userPwd"--%>
<%--id="userPwd"/>--%>
<%--</li>--%>
<%--<li class="odr_b" id="rePassword-label">--%>
<%--<li class="odr_b"><input placeholder="请重新输入新密码" class="s_text" type="password" name="rePassword"--%>
<%--id="rePassword"/></li>--%>
<%--<c:if test="${errorType==3}">--%>
<%--<span style="margin-right:150px;" class="t_msg">${error}</span>--%>
<%--</c:if>--%>
<%--</li>--%>
<%--</div>--%>
<%--<li class="plr25 c"><a class="news_btn r5 fs32" id="btn" onclick="checkLength();">提交</a></li>--%>
<%--</form>--%>
<%--</form:form>--%>
<%--</c:when>--%>
<%--<c:when test="${user.userPhone!=null}">--%>
<%--<form:form modelAttribute="PhoneModel" name="phoneForm" method="post" action="${ctx}/user/update_phone">--%>
<%--<form action="">--%>
<%--<div class="list_item2 p25">--%>
<%--<ul class="odr r5">--%>
<%--<li class="odr_b"><input placeholder="${phone}" class="s_text" type="text" Disabled="true"/>--%>
<%--<input id="userPhone" type="hidden" name="userPhone" value="${userPhone}"/>--%>
<%--</li>--%>
<%--<li class="odr_b" id="user-number">--%>
<%--<input id="number" name="number" class="s_text" type="text" placeholder="请输入验证码"/><a--%>
<%--name="getVerifyCode" class="hq_code r5" href="javascript:void(0)"--%>
<%--hasclick="1">获取验证码</a>--%>
<%--<c:if test="${errorType==1}">--%>
<%--<span style="margin-right:150px;" class="t_msg">${error}</span>--%>
<%--</c:if>--%>
<%--<c:if test="${errorType==2}">--%>
<%--<span style="margin-right:150px;" class="t_msg">${error}</span>--%>
<%--</c:if>--%>
<%--<c:if test="${errorType==4}">--%>
<%--<span style="margin-right:150px;" class="t_msg">${error}</span>--%>
<%--</c:if>--%>
<%--</li>--%>
<%--<input id="userPwd" class="s_text" type="hidden" placeholder="请输入6位数以上密码" name="userPwd"/>--%>
<%--<input id="rePassword" class="s_text" type="hidden" placeholder="请输入新密码" name="rePassword"/>--%>
<%--</ul>--%>
<%--</div>--%>
<%--<li class="plr25 c"> <a class="news_btn r5 fs32" onclick="numberForm();">下一步</a>--%>
<%--</form>--%>
<%--</form:form>--%>
<%--</c:when>--%>
<%--</c:choose>--%>
<%--</article>--%>
<%--</body>--%>
</html>